<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const chartData = ref({});
    const opts = ref({
      color: ["#1480dd","#73C0DE"],
      padding: [15,15,0,5],
      enableScroll: false,
      legend: {},
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        data: [
          {
            min: 0
          }
        ]
      },
      extra: {
        column: {
          type: "meter",
          width: 30,
          activeBgColor: "#000000",
          activeBgOpacity: 0.08,
          meterBorder: 3,
          meterFillColor: "#00aaff"
        }
      }
    });

    const getServerData = () => {
      setTimeout(() => {
        const res = {
			categories: ["周一","周二","周三","周四","周五","周六","周日"],
          series: [
            {
              name: "睡眠分布",
              data: [9]
            }
          ]
        };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
    };

    onMounted(() => {
      getServerData();
    });

    return {
      chartData,
      opts
    };
  }
};
</script>

<style scoped>
.charts-box {
  width: 100%;
  height: 420rpx;
}
</style>